<template>
    <div class="login-container">

        <!-- 导航栏 -->
        <van-nav-bar
            title="注册/登录"
            left-arrow
            @click-left="$router.back()"
            class="app-nav-bar"
        />
        <!-- /导航栏 -->
   
        <!-- 登录表单 -->
        <van-form @submit="onLogin"
            ref="loginRef" 
            :validate-first="true"
            :show-error-message="false" 
            :show-error="false" 
            @failed="onFailed"
        >
            <van-field
                v-model="user.mobile"
                icon-prefix="iconfont"
                left-icon="shouji"
                name="mobile"
                placeholder="请输入手机号"
                :rules="formRule.mobile"
            />
            <van-field
                v-model="user.code"
                clearable
                icon-prefix="iconfont"
                left-icon="yanzhengma"
                placeholder="请输入短信验证码"
                :rules="formRule.code" 
                :center='true'
            >
                <template #button>
                    <van-button size="mini" class="send-btn" v-if="isShow" :loading="isLoading" @click.prevent = "onSendSms" round>发送验证码</van-button>
                    <van-count-down @finish="finished" :time="1000 *60" format='ss s' v-else />
                </template>
            </van-field>

            <!-- 登录按钮 -->
            <div class="login-btn">
                <van-button class="login-button" type="info" block>登录</van-button>
            </div>
            <!-- /登录按钮 -->

        </van-form>
        <!-- /登录表单 -->

        
        
        
         
    </div>
</template>
<script>

import { login ,  sendSms} from '@/api/user'
import { Toast } from 'vant'

export default {
    name:'login',
    data() {
        return {
            user:{
                mobile:'13911111111', //手机号
                code:'246810'  //验证码
            },
            formRule:{
                mobile:[
                    {required: true,message:'请输入手机号码'},
                    {pattern:/^1[3|5|7|8|9]\d{9}$/,message:'手机号码格式错误'}
                ],
                code:[
                    {required: true,message:'请输入手机号码'},
                    {pattern:/^\d{6}$/,message:'验证码格式错误'}
                ]
            },
            isShow:true,
            isLoading:false

        }
    },
    methods: {

        //登录，注册
        async onLogin(){
            Toast.loading({
                message: '登录中...',
                duration:0,
                forbidClick: true,
            });
            try {
                const { data } = await login(this.user)
                this.$store.commit('setUser',data.data)
                Toast.success('登录成功')
                this.$router.back()
                //console.log(data)
            } catch (error) {
                console.log(error)
                Toast.fail('登录失败')
                //console.log('登录失败',error)
            }
        },

        //验证失败触发
        onFailed(errors){
            if(errors.errors[0]){
                this.$toast({
                    message:errors.errors[0].message,
                    position:top
                })
            }else{
                this.$toast({
                    message:errors.errors[1].message,
                    position:top
                })
            }
        },

        //验证码
        async onSendSms(){

            
            try {
                await this.$refs['loginRef'].validate('mobile') 
                this.isLoading = true
                const { data } = await sendSms(this.user.mobile)
                this.isShow= false

                //console.log(data) 
            } catch (err) {
                let message = ''
                if(err && err.response && err.response.status === 429){
                    message = '发送频繁，请稍后重试'
                }else if(err.name === 'mobile'){
                    message = err.message
                }else{
                    message = "未知错误！"
                }

                this.loading = true
                this.$toast({
                    message,
                    position:'top'
                })
            }
        },
        finished(){
            this.isShow = true
        }
    },
}
</script>
<style lang="less" scoped>
.login-btn{
    padding: 26px 16px;
    .login-button{
        background: #6db4fb;
        border: none;
        .van-button__text{
            font-size: 15px;
        }
    }
}
.van-button--default{
    width: 76px;
    background: #ededed;
    color: #666666;
}

</style>